<template>
	<el-dialog :title="`报警记录(IMEI:${state.queryForm.imei})`" v-model="visible" destroy-on-close :close-on-click-modal="false" draggable width="800">
		<el-row>
			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList" size="small">
				<el-form-item label="" prop="createTime">
					<el-date-picker
						:end-placeholder="$t('syslog.inputEndPlaceholderTip')"
						:start-placeholder="$t('syslog.inputStartPlaceholderTip')"
						range-separator="To"
						type="datetimerange"
						v-model="state.queryForm.createTime"
						value-format="YYYY-MM-DD HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item label="" prop="eventType">
					<el-select v-model="state.queryForm.eventType" filterable placeholder="请选择" :teleported="false">
						<el-option v-for="item in eventTypeOptions" :key="item.id" :label="item.eventType" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
					<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-table
			:data="state.dataList"
			v-loading="state.loading"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle.headerCellStyle"
			size="small"
			:height="420"
		>
			<el-table-column type="index" label="序号" width="60" />
			<el-table-column prop="deviceTypeName" label="类型-型号" show-overflow-tooltip width="220">
				<template #default="{ row }">
					<span>
						{{ row.deviceTypeName }}
						-
						{{ row.deviceModelName }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="detailAddress" label="安装点" show-overflow-tooltip min-width="150" />
			<el-table-column prop="eventTypeName" label="报警原因" show-overflow-tooltip min-width="150" />
			<el-table-column prop="alarmCauses" label="报警内容" show-overflow-tooltip min-width="180" />
			<el-table-column prop="deptName" label="所属单位" show-overflow-tooltip width="220" />
			<el-table-column prop="createTime" label="报警时间" show-overflow-tooltip width="220" />
			<!-- <el-table-column prop="confirmState" label="处理结果" show-overflow-tooltip min-width="90">
				<template #default="{ row }">
					<div>
						<span v-if="row.confirmState === 10" class="text-info">误报</span>
						<span v-if="row.confirmState === 20" class="text-primary">演练</span>
						<span v-if="row.confirmState === 30" class="text-error">报警</span>
						<span v-if="row.confirmState === 40">其他</span>
					</div>
				</template>
			</el-table-column> -->
			<el-table-column prop="smsAlarmSketch" label="短信通知" show-overflow-tooltip min-width="150" />
			<el-table-column prop="telephoneAlarmSketch" label="电话通知" show-overflow-tooltip min-width="150" />
			<el-table-column prop="officialAccountAlarmSketch" label="公众号通知" show-overflow-tooltip min-width="150" />
			<el-table-column prop="updateTime" label="处理时间" show-overflow-tooltip width="220" />
			<el-table-column prop="remarks" label="备注" show-overflow-tooltip min-width="120" />
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</el-dialog>
</template>

<script setup lang="ts" name="systemBasicDeviceEventRecord">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList } from '/@/api/alarm/alarmLogging';
// 定义查询字典

// 定义变量内容
const dataFormRef = ref();
// 搜索变量
const queryRef = ref();
const visible = ref(false);
const eventTypeOptions = ref<any[]>([]);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	pagination: {
		small: true,
	},
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	getDataList();
};

// 打开弹窗
const openDialog = (imei: string) => {
	visible.value = true;
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
	// 获取basicDevice信息
	if (imei) {
		state.queryForm.imei = imei;
		getDataList();
	}
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
